<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="fr">
        <el-button class="filter-item" style="margin-left: 10px;width: 120px;line-height: 15px;"  @click="addruleAddNameDialog()" type="primary" icon="el-icon-edit">添加规则</el-button>
        <!--<el-button class="filter-item" @click="deleteRule()" style="margin-left: 10px;width: 120px;line-height: 15px;"  type="danger" icon="el-icon-delete">删除规则</el-button>-->
      </div>
    </div>
    <el-table class="tqd_table"  :data="list"  v-loading="listLoading" border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column  label="名称" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="更名" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button  size="mini" @click="addruleRenameDialog(scope.row.id, scope.row.name)"  style="line-height: 12px;background: #fff;color: #606266;text-align: center;cursor: pointer;width: 60px;">更名</el-button>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="编辑规则明细" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="addRuleSetDialog(scope.row.id)"  style="line-height: 12px; background: #fff;color: #606266;text-align: center;cursor: pointer;width: 60px;">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteRule(scope.row.id)" style="margin-left: 10px;line-height: 12px;">删除规则</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加" :key='tableKey' :visible.sync="ruleAddnameDialog" width="500px" :close-on-click-modal="false">
      <el-form label-position="left" label-width="100px" style='width: 100%; '>
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="editMatch.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruleAddnameDialog = false">取 消</el-button>
        <el-button type="primary"  @click="saveMatchScoreRule">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除" :visible.sync="deleteRuleDialog" width="350px" :close-on-click-modal="false">
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteRuleDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmDeleteRuleBtn">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加" :key='tableKey1' :visible.sync="ruleRenameDialog" width="500px" :close-on-click-modal="false">
      <el-form label-position="left" label-width="100px" style='width: 100%; '>
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="editMatch.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruleRenameDialog = false">取 消</el-button>
        <el-button type="primary"  @click="updateMatchScoreRule">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="规则设定" :visible.sync="ruleSetDialog" width="960px" :close-on-click-modal="false">
      <div  class="tags-view-container1" style="margin-left: 30px;height: 25px;">
        <div class="common-tab tab1 tags-view-item1"  :class="{'active':activeClass == 0}"  @click ="selectItem(0)">
          <a href="javascript:;" class="tab-text">评分项</a>
        </div>
        <div class="common-tab tab1 tags-view-item1" :class="{'active':activeClass == 1}"  @click ="selectItem(1)">
          <a href="javascript:;" class="tab-text">评分方式</a>
        </div>
        <div class="common-tab tab1 tags-view-item1" :class="{'active':activeClass == 2}"  @click ="selectItem(2)">
          <a href="javascript:;" class="tab-text">运算规则</a>
        </div>
        <div class="common-tab tab1 tags-view-item1" :class="{'active':activeClass == 3}"  @click ="selectItem(3)">
          <a href="javascript:;" class="tab-text">排名方式</a>
        </div>
      </div>
      <div v-if="activeClass == 0">
        <div class="box">
          <div style="margin-bottom: 20px">
            <div class="common-tab tab1">
              <div class="tab-text">从属于</div>
            </div>
            <div class="common-tab tab2">
              <div class="tab-text">子项名称</div>
            </div>
            <div class="common-tab tab1">
              <div class="tab-text">子项顶分</div>
            </div>
            <div class="common-tab" style="float: right;margin-right: -35px">
              <div class="common-tab tab2">
                <div class="tab-text">评分项目计算方式</div>
              </div>
              <div class="common-tab tab2">
                <div class="tab-text">评分项目操作方式</div>
              </div>
            </div>
          </div>
          <div class="item common-tab"   v-loading="listLoading">
            <div v-for="(project,index) in ruleProjectList" :key="index">
              <div class="common-tab tab1">
                <div class="tab-text">
                  <el-select v-model="project.belong" @change="projectBelongChange(index)">
                    <el-option :label="1" :value="1"></el-option>
                    <el-option :label="2" :value="2"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="common-tab tab2">
                <el-input v-model="project.childName" style="width: 80%;margin-left: 20px;"/>
              </div>
              <div class="common-tab tab1">
                <el-input  v-model="project.childTop" style="width: 100%;" />
              </div>
            </div>
          </div>

          <div class="item common-tab" style="position: absolute;">
            <div>
              <div class="common-tab tab1" style="margin-left: 30px">
                <div class="tab-text">评分项1</div>
              </div>
              <div class="common-tab tab1">
                <div class="tab-text" v-model="rule.arithmeticRule" v-for="rule in selectIpadList" v-if="rule.type === 1">
                  <el-input v-model="rule.name"></el-input>
                </div>
              </div>
              <div class="common-tab tab1" >
                <el-select v-model="rule.arithmeticRule" v-for="rule in selectIpadList" v-if="rule.type === 1" :key="rule.type + rule +1">
                  <el-option v-for="item in scoreCalculateText" :value="item.value" :label="item.label" :key="rule.type + item+4"></el-option>
                </el-select>
              </div>
              <div class="common-tab tab1" style="margin-left: 50px;">
                <el-select v-model="rule.selectRule" v-for="rule in selectIpadList" v-if="rule.type === 1" :key="rule.type + rule">
                  <el-option v-for="item in scoreOptionText" :value="item.value" :label="item.label"  :key="rule.label + item+3"></el-option>
                </el-select>
              </div>
            </div>
            <div style="padding-top: 5px;">
              <div class="common-tab tab1" style="margin-left: 30px">
                <div class="tab-text">评分项2</div>
              </div>
              <div class="common-tab tab1">
                <div class="tab-text" v-model="rule.arithmeticRule" v-for="rule in selectIpadList" v-if="rule.type === 2">
                  <el-input v-model="rule.name" ></el-input>
                </div>
              </div>
              <div class="common-tab tab1">
                <el-select v-model="rule.arithmeticRule" v-for="rule in selectIpadList" v-if="rule.type === 2" :key="rule.type + rule +2">
                  <el-option v-for="item in scoreCalculateText" :value="item.value" :label="item.label" :key="rule.type + item +1"></el-option>
                </el-select>
              </div>
              <div class="common-tab tab1" style="margin-left: 50px;">
                <el-select v-model="rule.selectRule" v-for="rule in selectIpadList" v-if="rule.type === 2" :key="rule.type + rule +3">
                  <el-option v-for="item in scoreOptionText" :value="item.value" :label="item.label" :key="rule.label + item+2"></el-option>
                </el-select>
              </div>
            </div>
            <div>
              <div class="common-tab tab1" style="margin-left: 30px">
                <div class="tab-text">
                  <div class="common-tab">
                    <input type="checkbox" @change="changeRuleStatus" v-model="statusRule.status"  style="width: 30px;height: 30px;">
                  </div>
                  <div class="common-tab" style="font-size: 15pt;">生效</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="tab-text">
            <el-button @click="saveMatchScoreRuleProject">保存</el-button>
          </div>
        </div>
      </div>
      <div v-else-if="activeClass == 1">
        <div class="box">
          <div class="common-tab" style="width: 48%">
            <div class="tab-text">步频扣分</div>
            <div class="tab-text" style="margin: 10px 0 10px 0">
              <div class="common-tab" style="width: 150px">
                <div class="tab-text tab-text-pad">基础分值</div>
              </div>
              <div class="common-tab" style="width: 150px">
                <div class="tab-text tab-text-pad">倍率</div>
              </div>
            </div>

            <div v-for="item in ruleBaseRateList" style="margin-left: 70px;">
              <div class="common-tab" style="width: 150px">
                <div class="tab-text tab-text-pad">{{item.baseScore}}分</div>
              </div>
              <div class="common-tab" style="width: 150px">
                <div class="tab-text tab-text-pad">
                  <el-input type="number"  style="width: 80px" v-model="item.baseRate"></el-input>
                </div>
              </div>
            </div>

          </div>

          <div class="common-tab" style="width: 48%">
            <div class="tab-text">区间评分</div>
            <div class="tab-text" style="margin: 10px 0 10px 0">
              <div class="common-tab" style="width: 100px">
                <div class="tab-text tab-text-pad">初始值</div>
                <div class="tab-text tab-text-pad">
                  <el-input type="number" v-model="ruleScoreIntervalScore.initValue" style="width: 80px"></el-input>
                </div>
                <div class="tab-text tab-text-pad"></div>
              </div>
              <div class="common-tab" style="width: 100px">
                <div class="tab-text tab-text-pad">区间数</div>
                <div class="tab-text tab-text-pad">
                  <el-input type="number" v-model="ruleScoreIntervalScore.intervalValue" style="width: 80px"></el-input>
                </div>
                <div class="tab-text tab-text-pad"></div>
              </div>
              <div class="common-tab" style="width: 100px">
                <div class="tab-text tab-text-pad">间距</div>
                <div class="tab-text tab-text-pad">
                  <el-input type="number" v-model="ruleScoreIntervalScore.spacingValue" style="width: 80px"></el-input>
                </div>
                <div class="tab-text tab-text-pad"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="tab-text">
            <el-button @click="saveMatchScoreRuleBaseRate">保存</el-button>
          </div>
        </div>
      </div>
      <div v-else-if="activeClass == 2" style="padding-left: 50px;">
        <div class="box">
          <div class="box-item" v-for="item in baseArithmeticRuleList">
            <div class="common-tab">
              <input type="radio" class="box-item-radio" name="11" @change="arithmeticChanage(item.id)" v-if="item.checked === 1" checked />
              <input type="radio" class="box-item-radio" name="11" @change="arithmeticChanage(item.id)" v-else  />
            </div>
            <div class="common-tab">{{item.ruleText}}</div>
          </div>
        </div>
        <div class="box">
          <div class="tab-text">
            <el-button @click="saveMatchScoreArithmeticRule">保存</el-button>
          </div>
        </div>
      </div>
      <div v-else-if="activeClass == 3" style="padding-left: 50px;">
        <div class="box">
          <div class="box-item">
            <div style="font-size: 18pt;">总分相同时</div>
          </div>
          <div class="box-item" v-for="item in baseOrderRuleList">
            <div class="common-tab">
              <input type="radio" class="box-item-radio" name="2222" @change="orderChanage(item.id)" v-if="item.checked === 1" checked />
              <input type="radio" class="box-item-radio" name="2222" @change="orderChanage(item.id)" v-else  />
            </div>
            <div class="common-tab">{{item.orderText}}</div>
          </div>

        </div>
        <div class="box">
          <div class="tab-text">
            <el-button @click="saveMatchScoreOrderRule">保存</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getMatchScoreRuleList, saveMatchScoreRule, updateMatchScoreRule, getMatchScoreRuleProjectList,
    saveMatchScoreRuleProject, ruleScoreCalculateList, ruleScoreBaseRateList, ruleScoreIntervalScore,
    saveScoreBaseRate, baseArithmeticRuleList, matchScoreArithmeticRule, saveMatchScoreArithmeticRule,
    baseOrderRuleList, matchScoreOrderRule, saveMatchScoreOrderRule, matchScoreStatusRule,
    matchScoreStatusRuleSaveOrUpdate, selectIpadList, deleteRuleById
  } from '@/api/matchScoreRule'
  import { showMsg } from '@/utils'
  export default {
    data() {
      return {
        activeClass: 0,
        listLoading: false,
        ruleRenameDialog: false,
        ruleAddnameDialog: false,
        deleteRuleDialog: false,
        ruleSetDialog: false,
        tableKey: 0,
        tableKey1: 1,
        ruleId: '',
        listQuery: {
          pageNum: 1,
          pageSize: 15
        },
        editMatch: {
          id: null,
          name: null
        },
        list: null,
        ruleProjectList: null,
        ruleCalculateList: null,
        ruleBaseRateList: null,
        ruleScoreIntervalScore: null,
        baseArithmeticRuleList: null,
        baseOrderRuleList: null,
        selectIpadList: null,
        ipad1: null,
        ipad2: null,
        deleteRuleId: null,
        arithmeticRule: {
          id: 0,
          ruleId: 0,
          arithmeticRuleId: 0
        },
        orderRule: null,
        statusRule: {
          status: 0
        },
        scoreCalculateText: [
          {
            label: '求和',
            value: 1
          },
          {
            label: '平均',
            value: 2
          }
        ],
        scoreOptionText: [
          {
            label: '键盘式',
            value: 1
          },
          {
            label: '轮盘式',
            value: 2
          }
        ]
      }
    },
    created() {
      this.getList()
    },
    methods: {
      selectItem: function(index) {
        this.activeClass = index
        if (index === 2) {
          this.getBaseArithmeticRuleList(this.ruleId)
        }
      },
      addruleRenameDialog(id, name) {
        this.ruleRenameDialog = true
        this.editMatch.id = id
        this.editMatch.name = name
      },
      addruleAddNameDialog(id) {
        this.ruleAddnameDialog = true
      },
      deleteRule(id) {
        this.deleteRuleDialog = true
        this.deleteRuleId = id
      },
      confirmDeleteRuleBtn() {
        deleteRuleById({ ruleId: this.deleteRuleId }).then(res => {
          if (res.data.code === 0) {
            this.deleteRuleDialog = false
            this.getList()
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      addRuleSetDialog(id) {
        this.activeClass = 0
        this.editMatch.id = null
        this.editMatch.name = null
        this.ruleSetDialog = true
        this.ruleId = id
        this.getRuleProjectList(id)
        this.getRuleScoreCalculateList(id)
        this.getRuleScoreBaseRateList(id)
        this.getRuleScoreIntervalScore(id)
        this.getBaseArithmeticRuleList(id)
        this.getBaseOrderRuleList(id)
        this.arithmeticRule.ruleId = id
        this.matchScoreSelectIpadList(id)
      },
      saveMatchScoreRule() {
        var obj = {
          name: this.editMatch.name
        }
        saveMatchScoreRule(obj).then(res => {
          if (res.data.code === 0) {
            this.ruleAddnameDialog = false
            this.editMatch.id = null
            this.editMatch.name = null
            showMsg(res.data.message, 1)
            this.getList()
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      updateMatchScoreRule() {
        var obj = {
          name: this.editMatch.name,
          id: this.editMatch.id
        }
        updateMatchScoreRule(obj).then(res => {
          if (res.data.code === 0) {
            this.ruleRenameDialog = false
            showMsg(res.data.message, 1)
            this.getList()
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      getList() {
        this.listLoading = true
        getMatchScoreRuleList(this.listQuery).then(response => {
          this.list = response.data.data
          this.total = response.data.total
          this.listLoading = false
        })
      },
      getBaseArithmeticRuleList(id) {
        var obj = {
          ruleId: id
        }
        baseArithmeticRuleList(obj).then(response => {
          this.baseArithmeticRuleList = response.data.data
          this.getMatchScoreArithmeticRule(id)
        })
      },
      getMatchScoreArithmeticRule(id) {
        var obj = {
          ruleId: id
        }
        matchScoreArithmeticRule(obj).then(response => {
          if (response.data.data != null) {
            this.arithmeticRule = response.data.data
          }
        })
      },
      getRuleProjectList(id) {
        var obj = {
          ruleId: id
        }
        getMatchScoreRuleProjectList(obj).then(response => {
          this.ruleProjectList = response.data.data
          this.listLoading = false
        })
      },
      getRuleScoreCalculateList(id) {
        var obj = {
          ruleId: id
        }
        ruleScoreCalculateList(obj).then(response => {
          this.ruleCalculateList = response.data.data
          this.listLoading = false
        })
      },
      getRuleScoreBaseRateList(id) {
        var obj = {
          ruleId: id
        }
        ruleScoreBaseRateList(obj).then(response => {
          this.ruleBaseRateList = response.data.data
          this.listLoading = false
        })
      },
      getRuleScoreIntervalScore(id) {
        var obj = {
          ruleId: id
        }
        ruleScoreIntervalScore(obj).then(response => {
          this.ruleScoreIntervalScore = response.data.data
          this.listLoading = false
        })
      },
      getBaseOrderRuleList(id) {
        var obj = {
          ruleId: id
        }
        baseOrderRuleList(obj).then(response => {
          this.baseOrderRuleList = response.data.data
          this.listLoading = false
          this.getMatchScoreOrderRule(id)
          this.getMatchScoreStatusRule(id)
        })
      },
      getMatchScoreOrderRule(id) {
        var obj = {
          ruleId: id
        }
        matchScoreOrderRule(obj).then(response => {
          if (response.data.data != null) {
            this.orderRule = response.data.data
          }
        })
      },
      getMatchScoreStatusRule(id) {
        var obj = {
          ruleId: id
        }
        matchScoreStatusRule(obj).then(response => {
          this.statusRule = response.data.data
        })
      },
      saveMatchScoreRuleProject() {
        var list1 = this.ruleProjectList
        var objForm = []
        for (var i = 0; i < list1.length; i++) {
          if (list1[i].belong != null && list1[i].childName != null && list1[i].childTop != null) {
            var item = {
              id: list1[i].id,
              ruleId: this.ruleId,
              belong: list1[i].belong,
              childName: list1[i].childName,
              childTop: list1[i].childTop
            }
            objForm.push(Object.assign({}, item))
          }
        }
        var list2 = encodeURIComponent(JSON.stringify(objForm))
        var list3 = this.selectIpadList
        var objForm1 = []
        for (var j = 0; j < list3.length; j++) {
          var item1 = {
            id: list3[j].id,
            ruleId: this.ruleId,
            arithmeticRule: list3[j].arithmeticRule,
            selectRule: list3[j].selectRule,
            type: list3[j].type,
            name: list3[j].name
          }
          objForm1.push(Object.assign({}, item1))
        }

        var obj = {
          list: list2,
          calculateList: encodeURIComponent(JSON.stringify(objForm1))
        }
        saveMatchScoreRuleProject(obj).then(res => {
          if (res.data.code === 0) {
            showMsg(res.data.message, 1)
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      saveMatchScoreRuleBaseRate() {
        var ruleBaseRateList = this.ruleBaseRateList
        var ruleScoreIntervalScore = this.ruleScoreIntervalScore
        var objForm = []
        for (var i = 0; i < ruleBaseRateList.length; i++) {
          var item = {
            id: ruleBaseRateList[i].id,
            ruleId: this.ruleId,
            baseScore: ruleBaseRateList[i].baseScore,
            baseRate: ruleBaseRateList[i].baseRate
          }
          objForm.push(Object.assign({}, item))
        }
        var obj = {
          ruleBaseRateList: encodeURIComponent(JSON.stringify(objForm)),
          ruleScoreIntervalScore: encodeURIComponent(JSON.stringify(ruleScoreIntervalScore))
        }
        saveScoreBaseRate(obj).then(res => {
          if (res.data.code === 0) {
            showMsg(res.data.message, 1)
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      arithmeticChanage(id) {
        this.arithmeticRule.arithmeticRuleId = id
      },
      saveMatchScoreArithmeticRule() {
        var obj = {
          id: this.arithmeticRule.id,
          ruleId: this.arithmeticRule.ruleId,
          arithmeticRuleId: this.arithmeticRule.arithmeticRuleId
        }
        saveMatchScoreArithmeticRule(obj).then(res => {
          if (res.data.code === 0) {
            showMsg(res.data.message, 1)
            this.getBaseArithmeticRuleList(this.ruleId)
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      orderChanage(id) {
        this.orderRule.orderRuleId = id
      },
      saveMatchScoreOrderRule() {
        var obj = {
          id: this.orderRule.id,
          ruleId: this.ruleId,
          orderRuleId: this.orderRule.orderRuleId
        }
        saveMatchScoreOrderRule(obj).then(res => {
          if (res.data.code === 0) {
            showMsg(res.data.message, 1)
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      changeRuleStatus() {
        var status = this.statusRule.status
        if (!status) {
          status = 0
        } else {
          status = 1
        }
        var obj = {
          ruleId: this.statusRule.ruleId,
          status: status
        }
        matchScoreStatusRuleSaveOrUpdate(obj).then(res => {
          if (res.data.code === 0) {
          //  this.getMatchScoreStatusRule(this.statusRule.ruleId)
            showMsg(res.data.message, 1)
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      matchScoreSelectIpadList(id) {
        var obj = {
          ruleId: id
        }
        selectIpadList(obj).then(response => {
          this.selectIpadList = response.data.data
          this.ipad1 = this.selectIpadList[0]
          this.ipad2 = this.selectIpadList[1]
        })
      },
      projectBelongChange(index) {
      //  this.ruleProjectList[index].belong =
      },
      projectCalculateChange(index) {
        //  this.ruleCalculateList[0].scoreCalculate = 1
      }
    }
  }

</script>

<style scoped>
  .box {
    width: 920px;
    margin: 20px auto;
  }

  .common-tab {
    display: inline-block;
    vertical-align: middle;
  }

  .tab1 {
    width: 100px;
  }

  .tab2 {
    width: 200px;
  }
  .tab-text{
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
    font-size: 12pt;
  }
  .item{
    border-top: 1px dashed #a8a9a9;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  input{
    text-align: center;
    height: 30px;
  }
  .tags-view-container1{
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .tags-view-item1{
    height: 100%;
    background: #a8a9a9;
    color: #ffffff;
  }
  .active{
    height: 100%;
    background: #42B983;
    color: #ffffff;
  }
  button{
    background: #42B983;
    line-height: 40px;
    width: 90px;
    border-radius: 10px;
  }
  .tab-text-pad{
    height: 50px;
    border-bottom: #f0f0f0 dashed 1px;
  }
  .box-item{
    font-size: 16pt;
    padding: 10px 0 10px 0;
  }
  .box-item-radio{
    height: 20px;
    width: 20px;
  }
  button{
    line-height: 15px;

  }

</style>
